import React, {useState, useMemo} from 'react'


/**
 * 问题原因： 由于hooks使用function形式，失去了shouldComponentUpdate（还有其他的生命周期），
 * 而且在函数组件中，不再区分mount和update两个状态，意味着函数组件的每一次调用都会执行内部的所有逻辑，---造成性能损耗；
 * hooks使用useMemo和useCallback解决；
 */

/**
 * 父组件
 */
 function UseMemo() {
     const [xiaohong, setXH] = useState('小红待机')
     const [zhiling, setZL] = useState('志林待机')

     return (
         <div>
             <button onClick={() => {setXH( new Date().getTime())}}>小红</button>
             <button onClick={()=>{setZL(new Date().getTime()+',志玲向我们走来了')}}>志玲</button>
            {/* <ChildComponent name={xiaohong}>{zhiling}</ChildComponent> */}
            <OptimizeChild name={xiaohong}>{zhiling}</OptimizeChild>
         </div>
     )
 }

/**
 * 使用useMemo优化后的
 * @param {} param0 
 */
 function OptimizeChild ({name, children}) {
    function changeXiaohong(name){
        console.log('她来了，她来了。小红向我们走来了')
        return name+',小红向我们走来了'
    }

    const actionXiaohong = useMemo (() => changeXiaohong(name), [name]) //[name]，只有依赖的发生改变
    return(
        <div>
            <div>{actionXiaohong}</div>
            <div>{children}</div>
        </div>
    )
 }



 /**
  * 原始子组件----外部数据发生改变，就会调用changeXiaohong方法，性能损耗；
  */
 function ChildComponent({name, children}) {
    function changeXiaohong(name){
        console.log('她来了，她来了。小红向我们走来了')
        return name+',小红向我们走来了'
    }

    const actionXiaohong = changeXiaohong(name)
    return (
        <div>
            <div>{actionXiaohong}</div>
            <div>{children}</div>
        </div>
    )
 }

 export default UseMemo;